import React from 'react';
import moment from 'moment';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;
class SearchTime extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      data: {},
      keys: this.props.keys,
    };
  }

  range = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  }
  disabledDate = (current) => {
    // Can not select days before today and today
    return current && current.valueOf() > Date.now();
  }
  disabledRangeTime = (_, type) => {
    if (type === 'start') {
      return {
        disabledHours: () => this.range(0, 60).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    }
    return {
      disabledHours: () => this.range(0, 60).splice(20, 4),
      disabledMinutes: () => this.range(0, 31),
      disabledSeconds: () => [55, 56],
    };
  }
  onChange = (date, dateString) => {
    console.log(typeof (dateString[0]));
    const arr = {};
    arr.begin_time = dateString[0].replace(/\s/g, '');
    arr.end_time = dateString[1].replace(/\s/g, '');
    console.log(arr);
    this.setState({
      data: arr,
    });
  }
  onOk = () => {
    console.log(this.state.key);
    const data = this.state.data;
    const { dispatch, keys } = this.props;
    dispatch({
      type: 'dashboard/searchPUS',
      payload: { ...data, keys },
    });
    // switch (this.state.keys) {
    //   case 1: {
    //     this.props.dispatch({
    //       type: 'dashboard/searchPUS',
    //       payload: { data },
    //     });
    //     break;
    //     // this.props.dispatch({
    //     //   type: 'dashboard/searchUv',
    //     //   payload: { data },
    //     // });
    //     // this.props.dispatch({
    //     //   type: 'dashboard/searchSku',
    //     //   payload: { data },
    //     // });
    //   }
    //   case 2: {
    //     this.props.dispatch({
    //       type: 'dashboard/searchPUS',
    //       payload: { data },
    //     });
    //     break;
    //   }
    //   case 3: {
    //     this.props.dispatch({
    //       type: 'dashboard/searchPUS',
    //       payload: { data },
    //     });
    //     break;
    //   }
    // }
  }
  render() {
    console.log('1111111');
    return (
      <div>
        <RangePicker
          disabledDate={this.disabledDate}
          disabledTime={this.disabledRangeTime}
          showTime={{
            hideDisabledOptions: true,
            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
          }}
          format="YYYY-MM-DD "
          onChange={this.onChange}
          onOk={this.onOk}
        />
      </div>

    );
  }
}


export default SearchTime;

